import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Outlet, // 渲染子路由
} from 'react-router-dom';

// @ts-ignore
import routers from "@/router/index";

function App() {
  return <Router>
    <Routes>
      {
        routers.map((route: { path: string; component: JSX.IntrinsicAttributes; }) => <Route key={route.path} path={route.path} element={route.component} />)
      }
      <Route path='nest' element={<><div>router for '/nest'</div><Outlet /></>}>
        <Route path='one' element={<div>router for '/nest/one'</div>} />
      </Route>
      <Route
        path="*"
        element={
          <main style={{ padding: "1rem" }}>
            <p>There's nothing here!</p>
          </main>
        }
      />
    </Routes>
  </Router >
};

export default App;